<template>
    <div id="operateEdit" class="main-container mt10">
        <div>
            <el-form ref="userInfo" :model="userInfo" :rules="rules" class="formEmbedTable mt20">
                <table>
                    <caption>Modify Operator</caption>
                    <tr>
                        <td><span class="cRed"> * </span>Operator Name</td>
                        <td >
                            <el-form-item prop="userAlias">
                                <el-input v-model="userInfo.userAlias"></el-input>
                            </el-form-item>
                        </td>
                        <td><span class="cRed"> * </span>Status</td>
                        <td >
                            <el-form-item prop="userStt">
                                <el-radio-group v-model="userInfo.userStt">
                                <el-radio label="0">Active</el-radio>
                                <el-radio label="1">Suspended</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td><!--span class="cRed"> * </span-->Identification Document Type</td>
                        <td >
                            <el-form-item prop="userCertType">
                                <el-select v-model="userInfo.userCertType">
                                    <el-option v-for="item in $tools.dict.certTypeDictList" :key="item.key" :label="item.value" :value="item.key"></el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                        <td><!--span class="cRed"> * </span-->Identification Document No.:</td>
                        <td >
                            <el-form-item prop="userCertNo">
                                <el-input v-model="userInfo.userCertNo" ></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td><!--span class="cRed"> * </span-->Mobile Phone</td>
                        <td >
                            <el-form-item prop="userMobile">
                                <el-input v-model="userInfo.userMobile"></el-input>
                            </el-form-item>
                        </td>
                        
                        <td><span class="cRed"> * </span>Email</td>
                        <td >
                            <el-form-item prop="userEmail">
                                <el-input v-model="userInfo.userEmail" ></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="cRed"> * </span>Operator Role</td>
                        <td>
                            <el-form-item prop="roleNo">
                                <el-input v-model="userInfo.roleName" :disabled="true"></el-input>
                            </el-form-item>
                            <span class="btnArea">
                               <el-button @click="roleTableVisible = true">Search</el-button>
                            </span>
                        </td>
                        <td><span class="cRed"> * </span>Subbordiante to Department Name</td>
                        <td>
                            <el-form-item prop="branchName">
                                <el-input v-model="userInfo.branchName" :disabled="true"></el-input>
                            </el-form-item>
                            <span class="btnArea">
                                <el-button @click="branchTableVisible = true">Search</el-button>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="cRed"> * </span>Department</td>
                        <td>
                            <el-form-item prop="userDept">
                                <el-input v-model="userInfo.userDept"></el-input>
                            </el-form-item>
                        </td>
                        <td><span class="cRed"> * </span>Department Name</td>
                        <td>
                            <el-form-item prop="userDeptName">
                                <el-input v-model="userInfo.userDeptName"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>Sex</td>
                        <td colspan='3'>
                            <el-form-item prop="userSex" >
                                <el-radio-group v-model="userInfo.userSex">
                                    <el-radio label="F">Female</el-radio>
                                    <el-radio label="M">Male</el-radio>
                                </el-radio-group>
                                
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>Description</td>
                        <td colspan="3">
                            <el-form-item prop="userDesc" >
                                <el-input v-model="userInfo.userDesc" type="textarea"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
        </div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="queryAuth('userInfo')">Confirm</el-button>
            <!--
            <el-button type="primary" @click="resetForm('userInfo')">重置</el-button>
            -->
            <el-button type="primary" @click="backMain">Cancel</el-button>
        </div>
        <!--授权确认页面弹窗-->
        <div>
            <ynet-authDialog ref="dialogTable"  @getAuthForm="getAuthForm"></ynet-authDialog>
        </div>
        <!-- 机构选择开始 -->
        <div>
             <el-dialog title="select department" :visible.sync="branchTableVisible">
                <ynet-branchTree :roleBsnList="roleBsnList" @modifyMenuTree="modifyMenuTree" ></ynet-branchTree>
                <div class="btnArea mt20 tac">
                    <el-button @click="closeBranchSelct">Confirm</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="select role" :visible.sync="roleTableVisible">
                <div>
                    <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20">
                        <table>
                            <caption>Enquiry</caption>
                            <tr>
                                
                                <td>Role No.</td>
                                <td>
                                    <el-form-item prop="roleNo">
                                        <el-input v-model="queryForm.roleNo" ></el-input>
                                    </el-form-item>
                                </td>
                                <td>Role Name</td>
                                <td>
                                    <el-form-item prop="roleName">
                                        <el-input v-model="queryForm.roleName" ></el-input>
                                    </el-form-item>
                                </td>					
                            </tr>
                            <!--
                            <tr>
                                <td>角色类型</td>
                                <td>
                                    <el-form-item prop="roleType">
                                        <el-radio-group  v-model="queryForm.roleType">
                                            <el-radio label="1" >总行</el-radio>
                                            <el-radio  label="2" >分行</el-radio>
                                            <el-radio  label="3" >支行</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </td>
                            </tr>
                            -->
                        </table>
                    </el-form>
                </div>
                <div class="btnArea mt20 tac">
                    <el-button type="primary" icon="search" @click="queryRole('queryForm')" >Search</el-button>
                </div>
                <div class="fourForm tableForm menuTreeOption mt20">
                    <el-table :data="imRoleList" @select="selectRole" border>
                        <el-table-column type="selection" align="center"></el-table-column>
                        <el-table-column property="roleNo" label="Role No." align="center"></el-table-column>
                        <el-table-column property="roleName" label="Role Name" align="center"></el-table-column>
                        <el-table-column property="roleType" label="Category" align="center">
                            <template scope="scope">
                                {{ $tools.dict.BranchLevel(scope.row.roleType==1)}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页-->
                <div class="pagination tar mt20">
                    <el-pagination  @current-change="handleCurrentChange" :current-page="Number(queryForm.currentPage)" :page-size="Number(queryForm.turnPageShowNum)" layout="total, prev, pager, next, jumper" :total="Number(turnPageTotalNum)">
                    </el-pagination>
                </div>
                <div class="btnArea mt20 tac">
                    <el-button @click="closeRoleSelct">Confirm</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 机构选择结束 -->
    </div>
</template>
<script>
 import ghbIcon from '@src/components/icon'
    export default {
        name:'operateEdit',
        components:{
            ghbIcon
        },
        props:['operInfoDetail'],
        mounted(){
            this.userInfo=$.extend({},this.userInfo,this.operInfoDetail);
            this.addForm.inputUserNo=this.userInfo.userNo
            console.log("userInfo:"+JSON.stringify(this.userInfo))
            //查询所有机构
            this.$tools.request(this,"IM010101Action.do").then(data=>{
                this.branchInfoList=data.body.branchInfoList

                for(let i=0;i<this.branchInfoList.length;i++){
						if(this.branchInfoList[i].brhLevel == "1"){
							this.tableData1.push(this.branchInfoList[i])
						}
					}
					//console.log(this.tableData1)
					for(let j=0;j<this.tableData1.length;j++){
						let brhId = this.tableData1[j].brhId
						let childrens = []
						for(let k=0;k<this.branchInfoList.length;k++){
							if(brhId == this.branchInfoList[k].brhParentId){
								childrens.push(this.branchInfoList[k])
								this.tableData1[j].childrens = childrens
							}
						}
					}
					for(let l=0;l<this.tableData1.length;l++){
						for(let x=0;x<this.tableData1[l].childrens.length;x++){
							let brhId1 = this.tableData1[l].childrens[x].brhId
							let childrens1 = []
							for(let y=0;y<this.branchInfoList.length;y++){
								if(brhId1 == this.branchInfoList[y].brhParentId){
									childrens1.push(this.branchInfoList[y])
									this.tableData1[l].childrens[x].childrens = childrens1
								}
							}
						}
					}
					//console.log(this.tableData1)
					this.roleBsnList = this.tableData1
            })
        },
        data(){
            return{
                queryForm:{
                    roleType:'',roleNo:'',roleName:'',queryFlag:'',currentPage:'1',turnPageShowNum:'10'
                },
                turnPageTotalNum:'',
                roleBsnList:[],branchTableVisible:false,roleTableVisible:false,
                dialogTableVisible:false,
                authForm: { authUserNo: '', password: '',randomField:''},//授权数据
                addForm:{
                    imUserInfoList:[],
                    bsnCode:'IM0103',actionType:'1',stt:'',inputUserNo:'',

                },
                userInfo:{
                     userNo:'',userName:'',userStt:'0',userDesc:'',userDept:'',userDeptName:'',
                    branchNo:'',userAlias:'',userMobile:'',branchName:'',
                    userCertType:'',userCertNo:'',roleNo:'',roleName:'',userEmail:'',userSex:'',
                },
                imRoleList:[],//从后台查询的操作员
                selectedOption:[],
                branchInfoList:[],
                tableData1:[],
                rules:{
                    userAlias:[ 
                        {required:true,message:'required'},
                        { min: 1, max: 32, message: 'arrange 6 to 32', trigger: 'blur' },
                        {validator:this.$tools.validator.isCnEngNum,trigger:'blur', vm: this, formName: 'userInfo'}
                    ],
                    userStt:[ {required:true,message:'required'},],
                    branchNo:[ {required:true,message:'required'},],
                    userDept:[ {required:true,message:'required'},],
                   // userCertType:[ {required:true,message:'required'},],
                    userCertNo:[ 
                        //{required:true,message:'required'},
                        {validator:this.$tools.validator.isEngNum,trigger:'blur', vm: this, formName: 'userInfo'}
                    ],
                    userEmail:[ 
                        {required:true,message:'required'},
                        {validator:this.$tools.validator.isEmail,trigger:'blur', vm: this, formName: 'userInfo'}
                    ],
                    roleNo:[ {required:true,message:'required'},],
                    userMobile:[
                        //{required:true,message:'required'},
                        {validator:this.$tools.validator.isHKPhone,trigger:'blur', vm: this, formName: 'userInfo'}
                    ],
                    
                },
                needAuth:'',
                authType:'',
            }
        },
        methods:{
            closeRoleSelct(){
                this.roleTableVisible=false;
            },
            closeBranchSelct(){
                this.branchTableVisible=false;
            },
            selectRole(val){
                //选择的角色
                if(val.length!=1){
                    this.$alert('select one', 'warning', {
                        confirmButtonText: 'Confirm',
                        callback: action => {
                        }
                    });
                }else{
                    this.userInfo.roleNo=val[0].roleNo;
                    this.userInfo.roleName=val[0].roleName;
                    
                }
            },
            modifyMenuTree(val){
                //console.log("val:"+JSON.stringify(val))
				this.selectData = []
				if(val.length>0){
					this.disabled = false
				}else{
					this.disabled = true
				}
				for(let i=0;i<val.length;i++){
					let brhId = val[i].brhId
					for(let j=0;j<this.branchInfoList.length;j++){
						if(this.branchInfoList[j].brhId == brhId){
							this.selectData=this.branchInfoList[j]
                            this.userInfo.branchNo=this.selectData.brhId;
                            this.userInfo.branchName=this.selectData.brhName;
						}
					}
				}
			},
            getAuthForm(val){
                //获取授权数据
                this.authForm=val;
                console.log("val:"+JSON.stringify(val))
                //将授权信息合并到提交给后台的对象中
                this.addForm=$.extend(this.addForm,this.authForm)
                this.submitForm()  //自己页面提交给后台的.do方法
            },
            queryAuth(formName){//查询授权模式
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        let body={};body.bsnCode="IM0103";body.version="IM0103",
                        this.$tools.request(this,"IM010001Action.do",body).then(data=>{
                            if(data.body.errorCode==0){
                                if(data.body.needAuth==0){//无需授权
                                    this.submitForm()
                                }else if(data.body.needAuth==1 && data.body.authType==1){
                                    this.needAuth=1;
                                    this.authType=1;
                                    this.$refs["dialogTable"].show()
                                    // this.dialogTableVisible=true;
                                }else if( data.body.needAuth==1 && data.body.authType==2 ){
                                    this.needAuth=1;
                                    this.authType=2;
                                    this.submitForm()
                                }else{
                                    this.$alert("Authorization type error", 'warning', {
                                        confirmButtonText: 'Confirm',
                                        callback: action => {
                                        }
                                    });
                                }
                            }else{
                                this.$alert("System Error Try again", 'warning', {
                                    confirmButtonText: 'Confirm',
                                    callback: action => {
                                    }
                                });
                            }
                            console.log("data:"+JSON.stringify(data))
                            
                        })
                   }
                })
                
			},
            submitForm(){
                this.addForm.imUserInfoList=[];
                this.addForm.imUserInfoList.push(this.userInfo)
                this.addForm.stt=this.userInfo.userStt;
                console.log("editForm:"+JSON.stringify(this.addForm))
                this.$tools.request(this,"IM010302Action.do",this.addForm).then(data=>{
                    if(data.body.errorCode==0){
                        if(this.needAuth==1 && this.authType==2){
                             this.$message({
								type:'success',
								message:'Waiting for Authorized'
							})
                            this.$emit("back","isEdit")
                        }else if(this.needAuth==1 && this.authType==1){
                            if(data.body.authStatus==1){
                                this.$alert("Authorship No. or password wrong ,please resume load","warning",{
                                    confirmButtonText: 'Confirm',
                                })
                            }else{
                                this.$message({
								type:'success',
								message:'Modify Success'
							})
				this.$emit("back","isEdit")
                            }
                        }else{
                            this.$message({
								type:'success',
								message:'Modify Success'
							})
							this.$emit("back","isEdit")
                        }
                        
                    }else{
                        this.$alert("System Error Try again","warning",{
                            confirmButtonText: 'Confirm',
                            callback: action => {
                                this.$emit("back","isEdit")
                            }
                        })
                    }
                })
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
                this.selectedOption=[];
                this.value1='';
            },
            backMain(){
                this.$emit('back')
            },
            handleChange(val){
                this.addForm.branchId=val[val.length-1];
            },
            selectChange(){

            },
            handleCurrentChange(val) {//分页方法
                this.queryForm.currentPage=val;
                this.queryRole()
            },
            queryRole(){//查询角色信息列表
				//查询
				let _this = this
                if (_this.queryForm.roleName) {
                    _this.queryForm.queryFlag = 1
                } else{
                    _this.queryForm.queryFlag="";
                }
                _this.$tools.request(this, "IM010201Action.do", this.queryForm).then(data => {
                    //console.log(JSON.stringify(data))
                    if (data.body.errorCode == 0) {
                        //闲置控
                        this.imRoleList=[];
                        this.imRoleList=data.body.imRoleList;
                        this.turnPageTotalNum=data.body.turnPageTotalNum;
                    } else {
                        this.$alert("System Error Try again", 'warning', {
                            confirmButtonText: 'Confirm',
                            callback: action => {
                            }
                        });
                    }
                })
			},

        }
    }
</script>